<template>
	<view class="ProductClassification">
		<app-title title='分类' :types='true'></app-title>
		<view class="ProductClassification_box">
			<view class="Classification_left">
				<view class="Classification_left_item" v-for="(item,index) in classifyList" :key="index"
					:style='item.id === classifyListId?"background-color: #fff;color: #ff6000;":""'
					@click="classifyListTab(item.id)">


					<p>{{item.name}}</p>


					<view class="Classification_left_item_flag" :class='item.id === classifyListId?"show":"hide"'>
					</view>

				</view>
			</view>
			<view class="Classification_right">
				<view class="Classification_right_top">
					<view class="Classification_right_top_item" @click="salesSortFun">
						<p>销量排序</p>
						<uni-icons type="up" v-if="sort === 'sales_desc'"></uni-icons>
						<uni-icons type="down" v-if="sort === 'sales_asc'"></uni-icons>
					</view>
					<view class="Classification_right_top_item" @click="marketpriceSortFun">
						<p>价格排序</p>
						<uni-icons type="up" v-if="sort === 'marketprice_desc'"></uni-icons>
						<uni-icons type="down" v-if="sort === 'marketprice_asc'"></uni-icons>
					</view>
				</view>
				<scroll-view :scroll-top="scrollTop" scroll-y="true" class="Classification_right_bottom"
					@scrolltolower="lower">
					<view class="Classification_right_bottom_item" v-for="item,index in commodityList" :key="index"
						@click="goFun(`/pages/home/product_details/product_details?id=${item.id}`)">
						<image :src="item.thumb" mode=""></image>
						<view class="Classification_right_bottom_item_right">
							<view class="Classification_right_bottom_item_right_title">
								{{item.title}}
							</view>
							<view class="Classification_right_bottom_item_right_marketprice">
								{{item.now_price}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<app-login ref="login" @ShutDown='ShutDownFun'></app-login>
		<app-tab :current='1'></app-tab>
	</view>
</template>

<script>
	import {
		api_index_get_goods_cate_list,
		api_index_get_goods_list
	} from '@/api/home.js';


	export default {
		data() {
			return {
				equipment: '',
				classifyList: [],
				classifyListId: 0,
				commodityList: [],
				scrollTop: 0,
				page: 1,
				sort: '',
				salesSortNum: 0,
				marketpriceSortNum: 0
			}
		},
		onShow(e) {
			this.classifyList = [];
			uni.hideTabBar();
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				console.log('在H5环境中打开');
				this.equipment = 'H5';
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				console.log('在App环境中打开');
				this.equipment = 'App';
			}
			this.api_index_get_goods_cate_listFun();
			this.api_index_get_goods_listFun();
		},
		onLoad(e) {
			// console.log(e);
			if (e.id) this.classifyListId = e.id;
			if (process.env.UNI_PLATFORM === 'h5') {
				// 在H5环境中打开
				this.equipment = 'H5'
			} else if (process.env.UNI_PLATFORM === 'app-plus') {
				// 在App环境中打开
				this.equipment = 'App'
			}
			uni.getStorage({
				key: 'openid',
				success: (res) => {
					this.openid = res.data;
				}
			});
		},
		methods: {
			ShutDownFun(e) {
				uni.getStorage({
					key: 'openid',
					success: (res) => {
						this.openid = res.data;
					}
				});
			},
			goFun(url) {
				if (!url) {
					this.showinteraction('暂未开放');
					return
				}
				if (this.openid) {
					uni.navigateTo({
						url
					})
				} else {
					this.$refs.login.open();
				}
			},
			marketpriceSortFun() {
				this.page = 1;
				this.commodityList = [];
				if (this.marketpriceSortNum === 2) {
					this.marketpriceSortNum = 0;
					this.sort = '';
				} else {
					if (this.marketpriceSortNum === 0) {
						this.sort = 'marketprice_desc';
					} else {
						this.sort = 'marketprice_asc';
					}
					this.marketpriceSortNum++
				}
				this.api_index_get_goods_listFun();
			},
			salesSortFun() {
				this.page = 1;
				this.commodityList = [];
				if (this.salesSortNum === 2) {
					this.salesSortNum = 0;
					this.sort = '';
				} else {
					if (this.salesSortNum === 0) {
						this.sort = 'sales_desc';
					} else {
						this.sort = 'sales_asc';
					}
					this.salesSortNum++
				}
				this.api_index_get_goods_listFun();
			},
			classifyListTab(id) {
				this.sort = '';
				this.classifyListId = id;
				this.page = 1;
				this.commodityList = [];
				this.api_index_get_goods_listFun();
			},
			lower(e) {
				this.page++;
				this.api_index_get_goods_listFun();
			},
			async api_index_get_goods_listFun() {
				let up = {
					cate_id: this.classifyListId,
					sort: this.sort,
					keywords: '',
					page: this.page
				}
				let data = await api_index_get_goods_list(up);
				if (data.error === 0) {
					data.list.forEach(item => {
						this.commodityList.push(item);
					})
				} else {
					return
				}
				console.log(data);
			},
			async api_index_get_goods_cate_listFun() {
				// this.classifyList = [];
				let data = await api_index_get_goods_cate_list();
				data.list.forEach(item => {
					this.classifyList.push(item);
				})
			}
		}
	}
</script>

<style lang="scss">
	.ProductClassification {
		width: 100%;
		display: flex;
		flex-direction: column;
		height: 100vh;

		.ProductClassification_box {
			width: 100%;
			flex: 1;
			display: flex;
			overflow-y: auto;

			.Classification_left {
				width: 30%;
				height: 100%;
				background-color: #F6F6F6;
				overflow-y: auto;
				padding-left: 20rpx;

				.Classification_left_item {
					width: 100%;
					height: 80rpx;
					text-align: center;
					line-height: 80rpx;
					font-size: 26rpx;
					border-top-left-radius: 20rpx;
					border-bottom-left-radius: 20rpx;
					position: relative;
					z-index: 100;

					.Classification_left_item_flag {
						width: 60rpx;
						height: 10rpx;
						background: linear-gradient(3deg, #ff3232, #ff8719);
						position: absolute;
						bottom: 20rpx;
						left: 40rpx;
						z-index: 10;
						opacity: .3;
					}

					.show {
						animation: scale-up-hor-left 0.2s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
					}

					.hide {
						animation: scale-up-hor-left1 0.1s cubic-bezier(0.390, 0.575, 0.565, 1.000) reverse both;
					}

				}

			}


			.Classification_right {
				width: 70%;
				height: 100%;
				background-color: #fff;
				display: flex;
				flex-direction: column;

				.Classification_right_top {
					width: 100%;
					height: 80rpx;
					display: flex;
					justify-content: space-around;
					line-height: 80rpx;
					font-size: 26rpx;

					.Classification_right_top_item {
						display: flex;
						width: 200rpx;
						padding-left: 40rpx;
					}
				}

				.Classification_right_bottom {
					width: 100%;
					flex: 1;
					padding: 0 20rpx;
					overflow-y: auto;
					box-sizing: border-box;
					background-color: #fff;

					.Classification_right_bottom_item {
						width: 98%;
						height: 180rpx;
						margin: 10rpx auto;
						margin-bottom: 20rpx;
						display: flex;
						padding: 0 20rpx;
						align-items: center;
						box-shadow: 0 0 10rpx #ccc;
						border-radius: 10rpx;


						image {
							width: 140rpx;
							height: 140rpx;
						}

						.Classification_right_bottom_item_right {
							height: 100%;
							flex: 1;
							padding: 0 0 0 30rpx;
							display: flex;
							flex-direction: column;
							justify-content: space-around;

							.Classification_right_bottom_item_right_title {
								padding: 0 10rpx 0 0;
								width: 270rpx;
								text-overflow: ellipsis;
								text-wrap: nowrap;
								overflow: hidden;
								font-size: 24rpx;
								font-family: 'PingFang SC';
								font-weight: 500;
								color: #333;

							}

							.Classification_right_bottom_item_right_marketprice {
								width: 250rpx;
								font-size: 26rpx;
								font-weight: 500;
								color: #ff1e00;
								text-overflow: ellipsis;
								overflow: hidden;
								text-wrap: nowrap;
							}
						}
					}
				}
			}
		}
	}


	@-webkit-keyframes scale-up-hor-left {
		0% {
			-webkit-transform: scaleX(0.4);
			transform: scaleX(0.4);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		100% {
			-webkit-transform: scaleX(1);
			transform: scaleX(1);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}
	}

	@keyframes scale-up-hor-left {
		0% {
			-webkit-transform: scaleX(0.4);
			transform: scaleX(0.4);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		100% {
			-webkit-transform: scaleX(1);
			transform: scaleX(1);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}
	}


	@-webkit-keyframes scale-up-hor-left1 {
		0% {
			-webkit-transform: scaleX(0.4);
			transform: scaleX(0);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		100% {
			-webkit-transform: scaleX(1);
			transform: scaleX(1);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}
	}

	@keyframes scale-up-hor-left1 {
		0% {
			-webkit-transform: scaleX(0.4);
			transform: scaleX(0);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}

		100% {
			-webkit-transform: scaleX(1);
			transform: scaleX(1);
			-webkit-transform-origin: 0% 0%;
			transform-origin: 0% 0%;
		}
	}
</style>